<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>事件的基本使用</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        时间的基本使用:
        1. 使用`v-on:xxx`或者`@xxx`绑定事件,其中xxx是事件名;
        2. 事件的回调需要配置在`methods`对象中,最终会在vm上;
        3. methods中配置的函数,不要用箭头函数!否则this就不是vm了;
        4. methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象;
        5. `@click="demo"`和`@click="demo($event)"`效果一直,但后者可以传参;
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到尚硅谷学习</h2>
        <button v-on:click="showInfo">点我提示信息1</button>
        <button @click="showInfo">点我提示信息2</button>
        <button value="66" @click="showInfo2($event,66)">点我提示信息3</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false; //阻止Vue启动时生成生产提示
    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷'
        },
        methods: {
            /* showInfo:function showInfo(event){
                console.log(event.target.innerText);
                console.log(this === vm);  //此处的this是vm
                alert('同学你好');
            } */
            showInfo(event) {
                console.log(event.target.innerText);
                console.log(this === vm);  //此处的this是vm
                alert('同学你好');
            },
            /* showInfo:(event)=>{
                console.log(event.target.innerText);
                console.log(this === vm);  //此处的this是window
                alert('同学你好');
            } */
            showInfo2(event,number){
                console.log(number);
                console.log(event.target.innerText);
                console.log(event.target);
                console.log(event);
                console.log(event.target.value);
                console.log(this === vm);  //此处的this是vm
                alert('同学你好2');
            }
        }
    });
</script>

</html>